{% extends 'news/base.html' %}


{% block style %}
    {% load static %}
    <link rel="stylesheet" href="{% static 'news/css/fabu.css' %}">
    <link rel="stylesheet" href="/static/js/layui-v2.4.3/layui/css/layui.css">


{% endblock %}



{% block c_right %}
    <div id="fabu">

        <div class="fabu_1">
            <div></div> <b>我的发布</b>
        </div>

        <div class="btn">
            <button a="0" class="{% if status == '0' %}active{% endif %}">全部</button>
            <button a="1" class="{% if status == '1' %}active{% endif %}">待审核</button>
            <button a="2" class="{% if status == '2' %}active{% endif %}">审核中</button>
            <button a="3" class="{% if status == '3' %}active{% endif %}">审核通过</button>
            <button a="4" class="{% if status == '4' %}active{% endif %}">未通过审核</button>
        </div>
        <div>
            <p></p>
        </div>

        <ul class="content">
            {% for article in article_list1 %}
            <li>
                <img class="art1" src="{% url 'media' article.image %}">
                <h3 class="art2">{{ article.title }}</h3>
                <p class="art3">{{ article.content|safe|striptags }}</p>
                <p class="art5">{{ article.digist }}</p>
                <p class="art6">{{ article.distribute_time|date:'Y-m-d' }}</p>
            </li>
            {% endfor %}
        </ul>


        <div class="a">
            {% for page_a in article_list1.paginator.page_range %}
                <a href="{% url 'news:fabu' %}?page={{ page_a }}" class="{% if article_list1.number == forloop.counter %}active{% endif %}">{{ page_a }}</a>
            {% endfor %}
        </div>

    </div>

{% endblock %}
{% block js %}
    <script src="/static/js/jQuery.js"></script>
    <script src="/static/js/layui-v2.4.3/layui/layui.all.js"></script>
<script>
    $('.btn>button').click(function () {
        $('.content').html('');
        status = $(this).attr('a');
        $('.btn>button').prop('class', '');
        $(this).prop('class', 'active');
        $.ajax({
            url: "{% url 'news:news_list' %}?status=" + status,
            success: function(data) {
                loadDataAndShow(data);
            },
            error: function (e) {
                console.log(e);
            }
        });

        function loadDataAndShow(data) {
            if (!$.isArray(data)) return;
            data.forEach(function (e, index) {
                li = $('<li/>');
                img = $('<img/>');
                img.attr("src","{% url 'media' '' %}"+ e.image).addClass('art1');
                h3 = $('<h3/>').html(e.title).addClass('art2');
                p1 = $('<p/>').html(e.content).addClass('art3');
                p2 = $('<p/>').html(e.digist).addClass('art5');
                {#console.log(e.distribute_time);#}
                time = e.distribute_time.split('T')[0];
                p3 = $('<p/>').html(time).addClass('art6');
                li.append(img,h3,p1,p2,p3);
                $('.content').append(li);
            });
        }
    });
</script>
{% endblock %}